<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>

    <!-- 开发版本 -->
    <link rel="stylesheet" href="../static/plugins/bootstrap-3.4.1/css/bootstrap.css">
    <!-- 生产版本 -->
    <link rel="stylesheet" href="../static/plugins/bootstrap-3.4.1/css/bootstrap.min.css">

    <script src="../static/js/jquery-3.7.0.min.js"></script>

    <style>
        .bt {
            margin: 20px;
        }

        .menus {
            width: 200px;
            height: 1000px;
            border: 1px solid red;
        }

        .menus .header {
            background-color: darkgray;
            padding: 5px 5px;
            border-bottom: 1px dotted rgb(128, 128, 128);
            cursor: pointer;
        }

        .menus .content a {
            display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted rgb(128, 128, 128);
        }

        .hide {
            display: none;
        }
    </style>

</head>

<body>
<nav class="navbar navbar-inverse">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">杭州科技职业技术学院商户结算系统</a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <form class="navbar-form navbar-left">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="请输入你要搜索的内容">
                </div>
                <button type="submit" class="btn btn-default">搜索</button>
            </form>
            <ul class="nav navbar-nav navbar-right">
                {% if user %}
                   <li><a>{{user.username}}</a></li>
                   <li><a href="{{url_for('auth.logout')}}">退出登录</a></li>
                {% else %}
                   <li><a href="{{url_for('auth.login')}}">登录</a></li>
                {% endif %}
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
{% block body%}{% endblock %}

<div class="container-fluid ">
    <div class="col-sm-3">
        <div class="menus">
            <div class="item">
                <div class="header" onclick="clickMe(this);">结算处理</div>
                <div class="content hide">
                    <a>--待我审批</a>
                    <a>--我已审批</a>
                    <a href="{{url_for('sm.insert')}}">--结算录入</a>
                    <a>--使用说明</a>
                </div>
            </div>
            <div class="item">
                <div class="header" onclick="clickMe(this);">控制环境</div>
                <div class="content hide">
                    <a>--商铺管理</a>
                    <a>--商户管理</a>
                    <a>--部门设置</a>
                    <a>--使用说明</a>
                </div>
            </div>
            <div class="item">
                <div class="header" onclick="clickMe(this);">控制活动</div>
                <div class="content hide">
                    <a>--监管部门设置</a>
                    <a>--监管人员设置</a>
                    <a>--分级审批设置</a>
                    <a>--使用说明</a>
                </div>
            </div>
            <div class="item">
                <div class="header" onclick="clickMe(this);">信息与沟通</div>
                <div class="content hide">
                    <a>--查询分析</a>
                    <a>--公告通知</a>
                    <a>--系统说明</a>
                    <a>--数据导出</a>
                </div>
            </div>
            <div class="item">
                <div class="header" onclick="clickMe(this);">审计监督</div>
                <div class="content hide">
                    <a>--审批概览</a>
                    <a>--审计抽样</a>
                    <a>--风险评估</a>
                    <a>--使用说明</a>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    function clickMe(self) {
        var hasHide = $(self).next().hasClass("hide");
        if (hasHide) {
            $(self).next().removeClass("hide");
        } else {
            $(self).next().addClass("hide");
        }
    }
</script>
</body>
</html>